<template>
  <div id="slogan-box">
    <p class="pClass">凉州区道路运输管理局内设机构</p>
    <div class="slogan-center"></div>
    <div class="sloganpic pic1" @click="gotoWuwei('0005')"></div> <!--安管股-->
    <div class="sloganpic pic2" @click="gotoWuwei('0001')"></div> <!--出租股-->
    <div class="sloganpic pic3" @click="gotoWuwei('0004')"></div><!--战场股-->
    <div class="sloganpic pic4" @click="gotoWuwei('0002')"></div><!--公交股-->
    <div class="sloganpic pic5" @click="gotoWuwei('0006')"></div><!--维修股-->
    <div class="sloganpic pic6" @click="gotoWuwei('0006')"></div><!--稽查股-->
    <div class="sloganpic pic7" @click="gotoWuwei('0007')"></div>  <!--投诉中心-->
    <div class="sloganpic pic8" @click="gotoWuwei('0003')"></div> <!--运输股-->
    <div class="before-btn" @click="clickBtn('4')"></div>
    <div class="enter-btn"  @click="clickBtn('1')"></div>
  </div>
</template>

<script>
  import MYCONF from '../../myconf';
    export default {
        name: "sloganbox",
        data(){
          return{

          }
        },
      methods:{
        clickBtn(v){
          this.$emit("toNext", {
            sloganValue:v,
          })
        },
        gotoWuwei(value) {
          let userName = '';
          let passWord = '';
          let url = MYCONF.service.loginUser + value;
          this.$http.get(url).then(
            response => {
              response = response.body;
              if (response.status === '200') {
                userName = response.username;
                passWord = response.password;

                //let newNet = 'http://117.156.126.6:10004/#/login';
                let newNet = 'http://36.111.82.61:9080/manager/#/login?userName='+userName+'&password='+passWord;
                window.open(newNet);
                /*var elemIF = document.createElement('iframe');
                elemIF.src = newNet;
                elemIF.style.display = 'none';
                elemIF.refs = 'iframe';
                const vm = this.$refs.iframe.contentWindow.vm
                console.log(vm)

                document.body.appendChild(elemIF);
                // 防止下载两次
                setTimeout(function() {
                  document.body.removeChild(elemIF)
                }, 1000);*/
              }
            }, response => {
            }
          );
        }
      }
    }
</script>

<style lang="scss" scoped>
  @import "../../../static/common/common.scss";
  #slogan-box{
    width: 100%;
    height: $min-height;
    background: url("../../../static/images/signViews/back-slogan.png") no-repeat center;
    position: relative;
    z-index: 5;
    .slogan-center{
      width: 945px;
      height: 828px;
      background: url("../../../static/images/signViews/solgan-center.png") no-repeat center;
      position: absolute;
      left: 25%;
      top:20%;
      z-index: 10;
      /*-webkit-transform:translate(-50%, -50%);
      -moz-transform:translate(-50%, -50%);
      transform:translate( -50%, -50%);
      animation:myfirst 5s;*/
      -webkit-animation:myfirst 5s; /* Safari and Chrome */
      @-webkit-keyframes myfirst{
        0%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0;}
        40%{-webkit-transform:perspective(400px) rotateY(-10deg);}
        70%{-webkit-transform:perspective(400px) rotateY(10deg);}
        100%{-webkit-transform:perspective(400px) rotateY(0);opacity:1;}
      }
      @-moz-keyframes myfirst{
        0%{-moz-transform:perspective(400px) rotateY(90deg);opacity:0;}
        40%{-moz-transform:perspective(400px) rotateY(-10deg);}
        70%{-moz-transform:perspective(400px) rotateY(10deg);}
        100%{-moz-transform:perspective(400px) rotateY(0);opacity:1;}
      }
      @-ms-keyframes myfirst{
        0%{-ms-transform:perspective(400px) rotateY(90deg);opacity:0;}
        40%{-ms-transform:perspective(400px) rotateY(-10deg);}
        70%{-ms-transform:perspective(400px) rotateY(10deg);}
        100%{-ms-transform:perspective(400px) rotateY(0);opacity:1;}
      }
      @keyframes myfirst{
        0%{transform:perspective(400px) rotateY(90deg);opacity:0;}
        40%{transform:perspective(400px) rotateY(-10deg);}
        70%{transform:perspective(400px) rotateY(10deg);}
        100%{transform:perspective(400px) rotateY(0);opacity:1;}
      }
    }
    .enter-btn {
      width: 54px;
      height: 54px;
      background: url("../../../static/images/signViews/next.png") no-repeat center;
      position: absolute;
      bottom: 38px;
      right: 36px;
      cursor: pointer;
    }
    .before-btn{
      width: 54px;
      height: 54px;
      background: url("../../../static/images/signViews/before.png") no-repeat center;
      position: absolute;
      bottom: 38px;
      left: 36px;
      cursor: pointer;
    }
    .pClass{
      position: absolute;
      top: 6%;
      left: 50%;
      -webkit-transform:translate(-50%, -50%);
      -moz-transform:translate(-50%, -50%);
      transform:translate( -50%, -50%);
      font-family: PingFangSC-Semibold;
      font-size: 48px;
      color: #0B3B62;
      letter-spacing: 0;
      text-align: center;
      line-height: 48px;
    }
    .sloganpic {
      width: 322px;
      height: 238px;
      position: absolute;
      cursor: pointer;
      z-index: 20;
      -webkit-animation:pics 5s; /* Safari and Chrome */
      @-webkit-keyframes pics{
        0%{opacity:0;-webkit-transform:scale(0.3);}
        50%{opacity:1;-webkit-transform:scale(1.05);}
        70%{-webkit-transform:scale(0.9);}
        100%{-webkit-transform:scale(1);}
      }
      @-moz-keyframes pics{
        0%{opacity:0;-moz-transform:scale(0.3);}
        50%{opacity:1;-moz-transform:scale(1.05);}
        70%{-moz-transform:scale(0.9);}
        100%{-moz-transform:scale(1);}
      }
      @-ms-keyframes pics{
        0%{opacity:0;-ms-transform:scale(0.3);}
        50%{opacity:1;-ms-transform:scale(1.05);}
        70%{-ms-transform:scale(0.9);}
        100%{-ms-transform:scale(1);}
      }
      @keyframes pics{
        0%{opacity:0;transform:scale(0.3);}
        50%{opacity:1;transform:scale(1.05);}
        70%{transform:scale(0.9);}
        100%{transform:scale(1);}
      }
      /*@-webkit-keyframes pics{
        0%{opacity:0;-webkit-transform:translateY(-100px);}
        100%{opacity:1;-webkit-transform:translateY(0);}
      }
      @-moz-keyframes pics{
        0%{opacity:0;-moz-transform:translateY(-100px);}
        100%{opacity:1;-moz-transform:translateY(0);}
      }
      @-ms-keyframes pics{
        0%{opacity:0;-ms-transform:translateY(-100px);}
        100%{opacity:1;-ms-transform:translateY(0);}
      }
      @keyframes pics{
        0%{opacity:0;transform:translateY(-100px);}
        100%{opacity:1;transform:translateY(0);}
      }*/
     /* @-webkit-keyframes pics{
        0%,50%,100%{opacity:1;}
        25%,75%{opacity:0.5;}
      }
      @-moz-keyframes pics{
        0%,50%,100%{opacity:1;}
        25%,75%{opacity:0.5;}
      }
      @-ms-keyframes pics{
        0%,50%,100%{opacity:1;}
        25%,75%{opacity:0.5;}
      }
      @keyframes pics{
        0%,50%,100%{opacity:1;}
        25%,75%{opacity:0.5;}
      }*/
      &.pic1{
        background: url("../../../static/images/signViews/anguangu.png") no-repeat center;
        bottom: 50%;
        right: 9%;
      }
      &.pic2{
        background: url("../../../static/images/signViews/chuzugu.png") no-repeat center;
        bottom: 69%;
        right: 22%;

      }
      &.pic3{
        background: url("../../../static/images/signViews/zhanchanggu.png") no-repeat center;
        bottom: 20%;
        right: 12%;
      }
      &.pic4{
        background: url("../../../static/images/signViews/gongjiaogu.png") no-repeat center;
        bottom: 6%;
        right: 26%;
      }
      &.pic5{
        background: url("../../../static/images/signViews/weixiugu.png") no-repeat center;
        bottom: 6%;
        left: 26%;
      }
      &.pic6{
        background: url("../../../static/images/signViews/jichagu.png") no-repeat center;
        bottom: 19%;
        left: 12%;
      }
      &.pic7{
        background: url("../../../static/images/signViews/bangongshi.png") no-repeat center;
        bottom: 48%;
        left: 9%;
      }
      &.pic8{
        background: url("../../../static/images/signViews/yunshugu.png") no-repeat center;
        bottom: 68%;
        left: 22%;
      }
    }

  }


</style>
